<template>
  <div>
    <div ref="sousuo_inp" class="sousuo">
      <router-link to>
        <div ref="sousuo_inp1" @click="suanzhi" class="sousuo_inp">
          <p class="left_l"></p>
          <i class="sousuo_inp_i"></i>
          <input
            class="sousuo_inp_inp"
            type="text"
            placeholder="Search..."
            v-model="searchContent"
            @change="changes()"
          />
          <p class="right_l"></p>
        </div>
        <span @click="asd" v-if="xianshi" class="close_span">X</span>
      </router-link>
    </div>
    <div>
      <list :userData="userDatas" ref="child" />
    </div>
  </div>
</template>

<script>
import list from "@/components/list";
import "@/assets/css/sousuo.css";
import imgs from "@/assets/logo.png";
import imgs1 from "@/assets/img/index_lun.png";
export default {
  name: "sousuo",
  components: {
    list,
  },
  data() {
    return {
      searchContent: "",
      songlist: [],
      // 显示隐藏
      xianshi: false,
      userData: [
        {
          index: "A",
          users: [
            { id: 0, name: "a1", img: imgs },
            { id: 1, name: "a2", img: imgs1 },
            { id: 2, name: "a3", img: imgs },
          ],
        },
        {
          index: "B",
          users: [
            { id: 0, name: "b1", img: imgs1 },
            { id: 1, name: "b2", img: imgs },
            { id: 2, name: "b3", img: imgs1 },
          ],
        },
        {
          index: "C",
          users: [
            { id: 0, name: "c1", img: imgs },
            { id: 1, name: "c2", img: imgs1 },
            { id: 2, name: "c3", img: imgs },
            { id: 3, name: "c4", img: imgs },
          ],
        },
        {
          index: "D",
          users: [
            { id: 0, name: "d1", img: imgs1 },
            { id: 1, name: "d2", img: imgs },
            { id: 2, name: "d3", img: imgs1 },
          ],
        },
        {
          index: "E",
          users: [
            { id: 0, name: "e1", img: imgs },
            { id: 1, name: "e2", img: imgs1 },
            { id: 2, name: "e3", img: imgs },
          ],
        },
        {
          index: "F",
          users: [
            { id: 0, name: "f1", img: imgs1 },
            { id: 1, name: "f2", img: imgs },
            { id: 2, name: "f3", img: imgs1 },
          ],
        },
        {
          index: "G",
          users: [
            { id: 0, name: "g1", img: imgs },
            { id: 1, name: "g2", img: imgs1 },
            { id: 2, name: "g3", img: imgs },
          ],
        },
        {
          index: "H",
          users: [
            { id: 0, name: "h1", img: imgs1 },
            { id: 1, name: "h2", img: imgs },
            { id: 2, name: "h3", img: imgs1 },
          ],
        },
        {
          index: "I",
          users: [
            { id: 0, name: "i1", img: imgs },
            { id: 1, name: "i2", img: imgs1 },
            { id: 2, name: "i3", img: imgs },
          ],
        },
        {
          index: "J",
          users: [
            { id: 0, name: "j1", img: imgs1 },
            { id: 1, name: "j2", img: imgs },
            { id: 2, name: "j3", img: imgs1 },
          ],
        },
        {
          index: "K",
          users: [
            { id: 0, name: "k1", img: imgs },
            { id: 1, name: "k2", img: imgs1 },
            { id: 2, name: "k3", img: imgs },
          ],
        },
      ],
      userDatas: [],
    };
  },
  created() {
    this.userDatas = this.userData;
  },
  methods: {
    asd() {
      // 隐藏判断
      this.xianshi = false;
      // input val值附为空
      this.searchContent = "";
    },
    suanzhi() {
      // 显示判断
      this.xianshi = true;
    },
    changes() {
      var curVal = this.searchContent;
      if (curVal != "") {
        this.$refs.child.tables(curVal);
        this.userDatas = this.$refs.child.tables(curVal);
      } else {
        this.userDatas = this.userData;
        this.xianshi = false;
      }
    },
  },
};
</script>

<style scoped>
</style>